<template>
 <div style="background-color:#f0f3f4;width: 100%;height: 100%;margin:0;padding: 0">
   <div class="top" >
     <div class="top-con" style="margin-left: 3%">
       <div class="top-con-left" id="tcl1" ></div>
       <div class="top-con-right"><span style="color: #757575;font-size: 20px">新增订单</span><br/><span style="color: #757575;font-size: 40px">{{orderAddNumber}}</span>
         <div  id="an1" class="an"></div>
       </div>
     </div>
     <div class="top-con" style="margin-left: 4.5%">
       <div class="top-con-left" id="tcl2" style="height: 38%;margin-top: 13%"></div>
       <div class="top-con-right"><span style="color: #757575;font-size: 20px">新增调度单</span><br/><span style="color: #757575;font-size: 40px">{{dispatchAddNumber}}</span>
         <div id="an2" class="an"></div>
       </div>
     </div>
     <div class="top-con" style="margin-left: 4.5%">
       <div class="top-con-left" id="tcl3" style="width: 18%;height: 38%;margin-top: 13%"></div>
       <div class="top-con-right"><span style="color: #757575;font-size: 20px">未完成订单</span><br/><span style="color: #757575;font-size: 40px">{{orderUnfinishedQuantity}}</span>
         <div  id="an3" class="an"></div>
       </div>
     </div>
     <div class="top-con" style="float:right;margin-right: 3%">
       <div class="top-con-left" id="tcl4" style="height: 36%;width: 18%;margin-top: 15%"></div>
       <div class="top-con-right" ><span style="color: #757575;font-size: 20px">未完成调度单</span><br/><span style="color: #757575;font-size: 40px">{{dispatchUnfinishedQuantity}}</span>
         <div id="an4" class="an"></div>
       </div>
     </div>
   </div>
   <div class="module" style="float: left;margin-left: 3%">
     <div class="module-title"><span style="color: #757575;font-size: 24px;margin-left: 5%">未完成调度单状态</span></div>
     <div id="module1" class="echarts" style="margin-left: 0%"></div>
   </div>
   <div class="modulet" style="float: right;margin-right: 3%">
     <div style="width: 100%;height:5%;border-bottom: solid 1px #e0e0e0;text-align: left;line-height: 320%"><span style="color: #757575;font-size: 24px;margin-left: 5%">车辆状态跟踪</span></div>
     <div id="cardBox">
         <div class="card" v-for="(card,index) in messageList" :key="index">
           <div class="carHead"><el-avatar :size="65" :src="'data:image/jpeg;base64,'+card.carPhoto"></el-avatar></div>
           <div class="carMessage">
             <span class="carMTop">{{card.carNumber}}</span>
             <span class="text">调度单{{card.dispathId}}</span>
             <span class="text">{{card.createTime}}</span>
           </div>
           <div class="carMessage">
             <span class="carMTop">状态：{{card.dispathStatus}}</span>
             <span class="text">位置：{{card.location}}</span>
             <span class="text">司机：{{card.dirverName}}</span>
           </div>
         </div>
     </div>
   </div>
   <div class="module" style="float: left;margin-left: 3%">
     <div class="module-title"><span style="color: #757575;font-size: 24px;margin-left: 5%">车辆状态统计</span></div>
     <BillboardCarUseRate></BillboardCarUseRate>
   </div>

   <div class="module" style="float: left;margin-left: 3%;width: 94%;height: 120%">
     <div class="module-title" style="height: 6%;"><span style="color: #757575;font-size: 24px;margin-left: 3%">实时运输图</span></div>
     <div id="module2" style="width: 84%;height: 84vh;float: left;margin-left: 5%"></div>
     <div id="module2" class="refresh" @click="mapback"></div>
   </div>
 </div>
</template>

<script>
import BillboardCarUseRate from "./BillboardCarUseRate";
import {getMap} from "../utils/maputils";
import * as echarts from "echarts";
import zhongguo from "@/assets/mapJson/data-city.json";
export default {
  // var palce = document.getElementById('an1'),
  name: "BillboardAll",
  data(){
      return{
        messageList:[],//车辆状态
        dispatchStatusData: {}, // 调度单状态数据
        dispatchStatusXArr: [], // 调度单状态横坐标数组
        dispatchStatusYArr: [], // 调度单状态纵坐标数组
        personInfoData:'',//人员信息数据
        personInfoXArr:[],//人员信息-人员类别
        personInfoYArr:[],//人员信息-人员数量
        dispatchAddNumber:'',//今日新增调度单数量
        orderAddNumber:'',//今日新增委托订单数量
        dispatchUnfinishedQuantity:'',//待完成调度单总数
        orderUnfinishedQuantity:'',//待完成订单总数
        queryForm: {
          pageNum: 1,
          pageSize: 10
        },
        mapCityOrderWeightData:[],
        seeCity:[]
      }
  },
  methods:{
    mapback(){
      this.getMap();
    },
    //动画所需的option抽成方法
    getSetoption(ref){
      ref.setOption({
        graphic: {
          elements: [
            {
              type: 'group',
              left: 'center',
              top: 'center',
              children: new Array(7).fill(0).map((val, i) => ({
                type: 'rect',
                x: i * 20,
                shape: {
                  x: 0,
                  y: -40,
                  width: 10,
                  height: 80
                },
                style: {
                  fill: "#6eba8c"
                },
                keyframeAnimation: {
                  duration: 1000,
                  delay: i * 200,
                  loop: true,
                  keyframes: [
                    {
                      percent: 0.5,
                      scaleY: 0.3,
                      easing: 'cubicIn'
                    },
                    {
                      percent: 1,
                      scaleY: 0.3,
                      easing: 'cubicOut'
                    }
                  ]
                }
              }))
            }
          ]
        }
      })
    },
    //动画
    getAnimations(){
      let palce1 = echarts.init(document.getElementById('an1'));
      this.getSetoption(palce1)
      this.getWindowAdjust(palce1)
      let palce2 = echarts.init(document.getElementById('an2'));
      this.getSetoption(palce2)
      this.getWindowAdjust(palce2)
      let palce3 = echarts.init(document.getElementById('an3'));
      this.getSetoption(palce3)
      this.getWindowAdjust(palce3)
      let palce4 = echarts.init(document.getElementById('an4'));
      this.getSetoption(palce4)
      this.getWindowAdjust(palce4)
    },
    //调度单状态跟踪柱状图
    getEmodule1(){
      // 绘制图表
      // 基于准备好的dom，初始化echarts实例
      let module1 = echarts.init(document.getElementById('module1'))
      let myColor1 = ["#0e8174", "#6eba8c","#b9f2a1", "#10c4b5", "#005562", "#0e8174"];
//加载"加载动画"
      module1.showLoading();
      setTimeout(() => {
        module1.setOption({
          xAxis: {
            data: this.dispatchStatusXArr,
            axisLabel: {
              textStyle:{
                color: '#757575',
                fontSize:'20'
              },
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle:{
                color: '#757575',
                fontSize:'20'
              },
            }
          },
          series: [{
            name: '销量',
            type: 'bar',
            data: this.dispatchStatusYArr,
            itemStyle:{
              // 此时的color 可以修改柱子的颜色
              color: function (params) {
                // params 传进来的是柱子对象
                // dataIndex 是当前柱子的索引号
                return myColor1[params.dataIndex];
              }
            },
            label: {
              show: true,
              position: "outside",
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}单",
              textStyle:{
                color: '#757575',
                fontSize:'20'
              },
            }
          }]
        });
        // 获取到数据后隐藏加载动画
        module1.hideLoading();
      },1000)
      this.getWindowAdjust(module1)
    },
    //调度单数据源
    getEmodule1SetOption(){
      this.$axios({
        url: 'dispatch/ticket/statusList',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.dispatchStatusData=res.data.object
          for(let i=0;i<this.dispatchStatusData.length;i++){
            this.dispatchStatusXArr[i]=this.dispatchStatusData[i].status
            this.dispatchStatusYArr[i]=this.dispatchStatusData[i].carNumber
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // //人员信息柱状图
    // getEmodule5(){
    //   let module5 = echarts.init(document.getElementById('module5'))
    //   let myColor = ["#62bbb1", "#ef8888", "#6bc4de", "#b1ce4c", "#e8cd5f","#90cfc9"];
    //   module5.showLoading();
    //   setTimeout(() => {
    //     module5.setOption({
    //       grid: {
    //         top: "0%",
    //         left: "15%",
    //         bottom: "10%"
    //         // containLabel: true
    //       },
    //       // 不显示x轴的相关信息
    //       xAxis: {
    //         show: false,
    //       },
    //       yAxis: [
    //         {
    //           type: "category",
    //           inverse: true,
    //           data: this.personInfoXArr,
    //           // 不显示y轴的线
    //           axisLine: {
    //             show: false,
    //           },
    //             // 不显示刻度
    //           axisTick: {
    //             show: false
    //           },
    //           // 把刻度标签里面的文字颜色设置为白色
    //           axisLabel: {
    //             color:"#aaaa",
    //             textStyle:{
    //               color: '#757575',
    //               fontSize:'20'
    //             },
    //           }
    //         },
    //         {
    //           data: this.personInfoYArr,
    //           inverse: true,
    //           // 不显示y轴的线
    //           axisLine: {
    //             show: false
    //           },
    //           // 不显示刻度
    //           axisTick: {
    //             show: false
    //           },
    //           // 把刻度标签里面的文字颜色设置为白色
    //           axisLabel: {
    //             color:"#aaaa"
    //           }
    //         }
    //       ],
    //       series: [
    //         {
    //           name: "条",
    //           type: "bar",
    //           data: this.personInfoYArr,
    //           yAxisIndex: 0,
    //           // 修改第一组柱子的圆角
    //           itemStyle: {
    //             barBorderRadius: 20,
    //             // 此时的color 可以修改柱子的颜色
    //             color: function (params) {
    //               return myColor[params.dataIndex];
    //             }
    //           },
    //           // 柱子之间的距离
    //           barCategoryGap: 30,
    //           //柱子的宽度
    //           barWidth: 60,
    //           // 显示柱子内的文字
    //           label: {
    //             show: true,
    //             position: "inside",
    //             // {c} 会自动的解析为 数据  data里面的数据
    //             formatter: "{c}人",
    //               textStyle:{
    //                 color: '#757575',
    //                 fontSize:'20'
    //               }
    //           }
    //         }
    //       ]
    //     });
    //     module5.hideLoading();
    //   },2000)
    //
    // },
    // //获取人员信息数据
    // getPersonInfo(){
    //   this.$axios({
    //     url: 'sys/user/getPersonInfo',
    //     method: 'post',
    //   }).then(res => {
    //     if (res.data.success) {
    //       this.personInfoData=res.data.object
    //       for(let i=0;i<this.personInfoData.length;i++){
    //         this.personInfoXArr[i]=this.personInfoData[i].userName
    //         this.personInfoYArr[i]=this.personInfoData[i].id
    //       }
    //     }
    //   }).catch(err => {
    //     this.$message.error(err.message);
    //   })
    // },
    // 获取今日新增委托订单数量
    getOrderTodayAddQuantity(){
      this.$axios({
        url: 'order/form/getTodayAddQuantity',
        method: 'post',
      }).then(res => {
        this.orderAddNumber=res.data
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    getDispatchTodayAddQuantity(){
      this.$axios({
        url: 'dispatch/ticket/getTodayAddQuantity',
        method: 'post',
      }).then(res => {
        this.dispatchAddNumber=res.data
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //待完成调度单总数
    getDispatchUnfinishedQuantity(){
      this.$axios({
        url: 'dispatch/ticket/getDispatchUnfinishedQuantity',
        method: 'post',
      }).then(res => {
        this.dispatchUnfinishedQuantity=res.data
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //待完成订单总数
    getOrderUnfinishedQuantity(){
      this.$axios({
        url: 'order/form/getOrderUnfinishedQuantity',
        method: 'post',
      }).then(res => {
        this.orderUnfinishedQuantity=res.data
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //车辆状态图
    getLastTen(){
      this.$axios({
        url: 'carMessage/list',
        method: 'post'
      }).then(res => {
        if (res.data.success) {
          this.messageList = res.data.object;

        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //窗口自适应方法
    getWindowAdjust(obj){
      window.addEventListener("resize", function() {
        obj.resize();
      });
    },
    //绘制地图
    getMap() {
      let module2 = echarts.init(document.getElementById('module2'))
      const option = {
        // 背景颜色
        backgroundColor: "#ffffff",
        // 提示浮窗样式
        tooltip: {
          showContent: true,          //是否显示提示框浮层
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#005562",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          //提示框是否可以点击
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "15",
            width: 20,
            height: 30,
            //文本超出宽度
            overflow: "break",
          },
          showDelay: 100
        },
        series: [
          {
            type: "scatter",
            // type: "custom", //配置显示方式为用户自定义
            coordinateSystem: "geo",
            symbol:'image://'+require('@/assets/images/car.png'),
            legendHoverLink: true,
            symbolSize: [60, 60],
            // 这里渲染标志里的内容以及样式
            label: {
              show: true,
              formatter(value) {
                //return value.name;
                return '';
              },
              //color: "#fff",
            },
            // 标志的样式
            // itemStyle: {
            //   normal: {
            //     color: "rgba(255,0,0,.7)",
            //     shadowBlur: 2,
            //     shadowColor: "rgba(255,0,0,.7)",
            //   },
            // },
            tooltip: {
              triggerOn:'click',
              enterable:true,
              formatter(params) {
                let obj = JSON.stringify(params.value[12]).replaceAll("'","").replaceAll("\"","^");
                return `<div>
                        <table  border="1px" style="border-collapse:collapse">
                        <tr><th colspan="3">${params.value[3]}</th></tr>
                        <tr><td align="rignt">司机</td><td colspan="2">${params.value[6]}</td></tr>
                        <tr><td>电话</td><td colspan="2">${params.value[9]}</td></tr>
                        <tr><td>${params.value[7]}</td><td>${params.value[8]}kg</td><td>${params.value[10]}m³</td></tr>
                         <tr><td>调度单号</td><td colspan="2">${params.value[2]}</td></tr>
                         <tr><td>当前地点</td><td colspan="2">${params.value[11]}</td></tr>
                        <tr><td>起点</td><td colspan="2">${params.value[5]}</td></tr>
                        <tr><td>终点</td><td colspan="2">${params.value[4]}</td></tr>
                        <tr><td colspan="3"><div style="cursor: pointer" onclick="see('${obj}')" >查看调度单详情</div></td></tr>
                        </table></div>
                       `;
              }
            },
            // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
            data:this.mapCityOrderWeightData,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: false,
            zlevel: 1,
          },
        ],
        // 地图配置
        geo: {
          map: "china",
          //可以伸缩
          roam:true,
          //伸缩比例
          zoom:1.2,
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#757575",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "#209e91",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "#209e91",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#209e91",
              borderWidth: 0,
            },
          },
        },
        graphic: [
          {
            type: "text",
            left: "15%",
            top: "10%",
            style: {
              text: "中国",
              name:'china',
              font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              fill: "#209e91",
            },
          },
        ],
      };
      // 防止graph里频繁添加click事件，在添加click事件之前先全部清空掉。
      module2.off()
      module2.on("click", ({name}) => {
        // 如果option.graphic里已经有了城市名称，则不进行任何操作，防止频繁点击
        const index = option.graphic.findIndex(i => i.style.text === name);
        if (!name || index !== -1) return
        const [mapName, mapJson] = getMap(name);
        option.geo.zoom = 0.8;
        option.geo.map = mapName;
        // 为了重新定位，这里使用了length
        const idx = option.graphic.length + 1;
        option.graphic.push({
          type: "text",
          left: `${idx * 10}%`,
          top: "10%",
          style: {
            text: name,
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: "#209e91",
          },
          onclick: () => {
            // 利用函数的作用域，可以直接拿上面的name来用
            const [grahpName, graphJson] = getMap(name);
            const index = option.graphic.findIndex(i => i.style.text === name);
            // 点击元素之后的所有元素全部删除
            option.graphic.splice(index + 1);
            option.geo.map = mapName;
            echarts.registerMap(grahpName, graphJson);
            module2.setOption(option, true);
          },
        });
        echarts.registerMap(mapName, mapJson);
        module2.setOption(option, true);
      });
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("china", zhongguo)
      module2.showLoading();
      setTimeout(() => {
        module2.setOption(option);
        module2.hideLoading();
      },5000)
    },
    //得到地图标志的数据
    getMapOptions(){
      this.$axios({
        url: 'dispatch/ticket/listForTransportation',
        method: 'post',
        data:this.queryForm
      }).then(res => {
        if (res.data.success) {
          var seeCity=res.data.object.list;
          for(let i=0;i<res.data.object.list.length;i++){
            let citylist=res.data.object.list[i];
            let mapCity=citylist.currentNodeCity;
            if(mapCity!=null){
              let mapCityInfo = {};
              mapCityInfo.value =[];
              mapCityInfo.name=mapCity.cityName;
              //经度0
              mapCityInfo.value.push(mapCity.longitude);
              //维度1
              mapCityInfo.value.push(mapCity.latitude);
              //调度单号2
              mapCityInfo.value.push(citylist.ticketId);
              //车牌号3
              mapCityInfo.value.push(citylist.carNumber);
              //终点4
              mapCityInfo.value.push(citylist.endCity.mergerName);
              //起点5
              mapCityInfo.value.push(citylist.startCity.mergerName);
              //司机6
              mapCityInfo.value.push(citylist.carInfo.anotherOne);
              //车的类型7
              mapCityInfo.value.push(citylist.carInfo.type);
              //车辆载重8
              mapCityInfo.value.push(citylist.carInfo.carLoad);
              //司机电话9
              mapCityInfo.value.push(citylist.carInfo.baseDriver.driverTel);
              //车辆容积10
              mapCityInfo.value.push(citylist.carInfo.volume);
              //当前地点11
              mapCityInfo.value.push(mapCity.mergerName);
              //记录在list中的index12
              mapCityInfo.value.push(citylist)
              //mergerName
              this.mapCityOrderWeightData.push(mapCityInfo)
            }
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
  },
  mounted() {
    //渲染调度单状态柱状图
    this.getEmodule1();
    //获取调度单状态柱状图所需的数据
    this.getEmodule1SetOption();
    //渲染人员信息图
    // this.getEmodule5();
    // //获取人员信息数据
    // this.getPersonInfo();
    //今日新增调度单数量
    this.getDispatchTodayAddQuantity();
    //今日新增订单数量
    this.getOrderTodayAddQuantity();
    //待完成调度单总数
    this.getDispatchUnfinishedQuantity();
    //待完成订单总数
    this.getOrderUnfinishedQuantity();
    //渲染动画
    this.getAnimations();
    //车辆柱状图
    this.getLastTen();
    //车辆实时运输图跳转到运输详情
    let that= this;
    window.see=function (o){
    let i =  eval('(' + o.replaceAll("^","\"") + ')');
      that.$store.commit('dispatchTicket',i)
      that.$router.push({name: 'DispatchTrackTracking'})
      //that.$router.push({ path: '/DispatchTrackTracking'});
    }
  },
  components:{
    'BillboardCarUseRate':BillboardCarUseRate,
  },
  created() {
    this.getMapOptions();
    this.$nextTick(() => {
      this.getMap();
    })
  }
}
</script>

<style scoped>
*{
  margin: 0px;
  padding:0;
}
.top{width: 100%;height: 20vh}
.top-con{width: 20%;height: 90%;float: left;background-color: #ffffff;box-shadow: 10px 10px 5px #c4c6c7;border-radius: 5px }
.top-con-left{width: 20%;height: 44%;float: left;margin-top: 12%;margin-left: 10%}
.top-con-right{width: 58%;height: 60%;float: left;margin-left: 5%;margin-top: 12%;}
#tcl1{background: url("../../assets/images/add1.png");background-size: 100% 100%}
#tcl2{background: url("../../assets/images/add2.png");background-size: 100% 100%}
#tcl3{background: url("../../assets/images/add3.png");background-size: 100% 100%}
#tcl4{background: url("../../assets/images/add4.png");background-size: 100% 100%}
.module{width:45%;height: 70%;background-color: #ffffff;box-shadow: 10px 10px 5px #c4c6c7;border-radius: 5px;margin-top:2%}
.modulet{width:45%;height: 145%;background-color: #ffffff;box-shadow: 10px 10px 5px #c4c6c7;border-radius: 5px;margin-top:2%}
.module-title{width: 100%;height: 10%;border-bottom: solid 1px #e0e0e0;line-height: 320%;text-align: left;}
.echarts{width: 95%;height: 90%;margin-left: -15%}
.an{width: 50%;height: 30%;margin: auto}
.card{width:100%;border-bottom:solid 1px #e0e0e0;float: left;}
.carHead{margin:10px 10px 10px 15px ;float: left;}
.carMessage{width: 33%;float:left;text-align: left;margin-left: 15px}
.carMTop{display: block;font-size: 19px;color: #5d5d5e;line-height: 30px;}
.text{display: block;font-size: 15px;color: #5d5d5e;line-height: 24px;}
.refresh{width: 3%;height: 5vh;float: right;background: url("../../assets/images/refresh.png");background-size: 100% 100%}
</style>
